<template>
  <!--使用说明：
    1.官网：
    https://dafrok.github.io/vue-baidu-map/#/zh/bmaplib/marker-clusterer
    2.使用步骤：
    （1）下载，按需引入组件，按需引入指定类，外层盒子设置宽高
    （2）标注点bm-marker外包层盒子循环，直接循环bm-marker报错
    （3）数据接口地址 https://shzz.mzt.zj.gov.cn/st_shzz

    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=eiHMYLzoazE9ZhyZP2LeZ7vG6itetMhF&callback=init"
    src="http://api.map.baidu.com/getscript?v=3.0&ak=N2p6isvbMjUuqa2yS1ZqxzCTttlxkKll"
  -->
  <div class="vue-baidu-map">
      <baidu-map
        class="map"
        :center="center"
        ak="N2p6isvbMjUuqa2yS1ZqxzCTttlxkKll"
        :zoom="zoom"
        @ready="handler"
        :mapClick="false">
        <bml-marker-clusterer
          :averageCenter="true"
          v-if="pointList.length != 0"
          >
          <!-- 此处要在bm-marker外包层盒子循环，直接循环bm-marker报错 -->
          <div v-for="(item, index) in pointList" :key="index">
            <bm-marker
            :position="{ lng: item.lng, lat: item.lat }"
            :icon="{ url:item.url, size: { width: 74, height: 111 } }"
            @click="showDetail(item,$event)"
            :dragging="true"
            >
            </bm-marker>
        </div>
        </bml-marker-clusterer>
        <bm-info-window
            :position="point"
            :show="infoWindowShow"
            :offset="{ width:250,height:370 }"
            @open="infoWindowOpen"
            @close="infoWindowClose">
              <MapPopup :checkPoint="checkPoint"></MapPopup>
        </bm-info-window>
      </baidu-map>
  </div>
</template>
<script>
// 按需引入百度地图
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
// 按需引入点聚合
import { BmlMarkerClusterer } from 'vue-baidu-map'
// 标注点
import BmMarker from 'vue-baidu-map/components/overlays/Marker';
// 标注弹窗
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow';
import MapPopup from '../../components/mapPopup.vue'
// 地图样式
// import { styleJson } from '../components/mapjson/styleJson.js';
import { mapstyle } from '../../components/mapjson/mapstyle.js';
import { ShzzInfoList } from '@/api/index'
export default {
  name: 'vue-baidu-map',
  components: { BaiduMap, BmMarker, BmInfoWindow,BmlMarkerClusterer,MapPopup },
  data(){
    return{
      center:{ lng: 121.86917, lat: 29.47758 },
      point:{ lng: 121.87046110537483, lat: 29.477720199733763 },// 标注点
      checkPoint:{},//标记点信息
      zoom:16,
      BMap:'',
      map:'',
      infoWindowShow:false,
      pointList:[],
      config:{
        startdate:'',
        enddate:'',
      },
    }
  },
  mounted(){
    this.getMapList()
  },
  methods:{
    handler({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      this.center.lng = 121.87046110537483;
      this.center.lat = 29.477720199733763;
      map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
      map.enableContinuousZoom()// 可拖拽
      // node_modules里面的vue-baidu-map/components/map/Map.vue
      // script.src = https://api.map.baidu.com/apiv=2.0&ak={ak}&callback=_initBaiduMap
      // 改成
      // script.src = https://api.map.baidu.com/apiv=3.0&ak=${ak}&callback=_initBaiduMap
      map.setMapStyleV2({ styleJson:mapstyle });
    },
    // 中间地图-社会组织地图列表
    // 请求路径 https://shzz.mzt.zj.gov.cn/st_shzz
    async getMapList(){
      let params = {
        model:'ShzzGetZsgyManager',
        method:'getShzzInfoList',
        xzqh:'330225',
        startdate:this.config.startdate,
        enddate:this.config.enddate
      }
      try{
        await ShzzInfoList(params).then(res => {
          console.log(res,'中间地图-社会组织地图列表');
          res.data.data.forEach(item => {
            item.url = require('../../assets/images/map-icon.png')
          })
          this.pointList = [ ...res.data.data ]
          // this.point.lat = this.pointList[0].lat
          // this.point.lng = this.pointList[0].lng
          // this.infoWindowShow = true
          // this.myIcon = this.BMap.Icon(require('../../assets/images/map-icon.png'),this.BMap.Size(74,111));
        })
      }catch(err){
        console.log(err);
      }
    },
    // 百度地图的弹框
    infoWindowClose() {
      this.infoWindowShow = false;
    },
    infoWindowOpen() {
      console.log('开启信息窗口');
      this.infoWindowShow = true;
    },
    // 点击标注点
    showDetail(item, event) {
      this.zoom = this.map.getZoom()
      console.log(this.map);
      console.log('map.getZoom()',this.map.getZoom());
      this.checkPoint = { ...item }
      // 聚焦
      this.point.lat = item.lat
      this.point.lng = item.lng
      this.infoWindowShow = true
      // 阻止冒泡触发closeInfo方法
      event.domEvent.stopPropagation()
    },
  }
}
</script>
<style lang="scss" scoped>
@function companyW($num) {
  @return ($num * 100)/1920;
}
@function companyH($num) {
  @return ($num * 100)/1080;
}
@font-face {
    font-family: "YouSheBiaoTiHei";
    /*这里是说明调用来的字体名字*/
    src:url('../../assets/YouSheBiaoTiHei-2.ttf')
    /*这里是字体文件路径*/
}
.map{
    width: 100vw;
    height: 100vh;
  }
  /* 样式穿透 修改百度地图原有样式 */
/* 去掉百度地图logo--begin */
::v-deep .BMap_cpyCtrl {
      display: none;
  }
  ::v-deep .anchorBL {
      display: none;
  }
  // ::v-deep .BMap_bubble_pop img {
  //     display: none;
  // }
//   ::v-deep .map{
//     div:nth-child(4){
//       position: relative !important;
//     }
//   }
//   ::v-deep .BMap_bubble_pop {
//   }
//   ::v-deep .BMap_bubble_content {
//   }
//   ::v-deep .BMap_bubble_top {
//       display: none;
//   }
//   ::v-deep .BMap_bubble_bottom {
//       display: none;
//   }
// //隐藏边角
    ::v-deep .BMap_pop div:nth-child(1) div{
      background: none !important;
      border: none !important;

    }
  ::v-deep .BMap_pop div:nth-child(3) div{//右上方块
      display: none;
  }
  ::v-deep .BMap_pop div:nth-child(5) div {//左下方块
      display: none;
  }
  ::v-deep .BMap_pop div:nth-child(7) div{//右下方块
      display: none;
  }
  ::v-deep .BMap_shadow {
      display: none;
  }
  ::v-deep .BMap_pop .BMap_center {
    width: companyW(452vw);
    height: companyH(499vh);
    border: none;
    background: url('../../assets/images/map-popup.png') no-repeat;
    background-size: 100% 100%;
  }
  ::v-deep .BMap_pop .BMap_top {
      display: none;
  }
  ::v-deep .BMap_pop .BMap_bottom {
      display: none;
  }
  ::v-deep .BMap_pop img {//中下箭头与右上叉号
      display: none;
  }
  ::v-deep .el-picker-panel {
      background-color: #042559;
  }
</style>
